<template>
  <view class="invutation">
    <view class="invutation-num" @click="toActivityDetailInvitationRankingDetail">
      <view class="left">
        <view class="title">我带来的人</view>
        <view class="jump">
          <text class="text">
            {{ inviteRegisterNum }}
            <text class="text-num-unit">人</text>
          </text>
          <text class="ali-icon icon-you1"></text>
        </view>
      </view>
      <view class="right">
        <TImage
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/frame.png"
          width="96rpx"
          height="96rpx"
        ></TImage>
      </view>
    </view>
    <view
      v-if="openInviteStatus"
      class="invutation-rank"
      @click="toActivityDetailInvitationRanking"
    >
      <view class="left">
        <view class="title">邀约排行榜</view>
        <view class="jump">
          <text class="text">立即查看</text>
          <text class="ali-icon icon-you1"></text>
        </view>
      </view>
      <view class="right">
        <TImage
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/rectangle-415.png"
          width="96rpx"
          height="96rpx"
        ></TImage>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  const props = defineProps({
    openInviteStatus: {
      type: Number,
      default: 1,
    },
    inviteRegisterNum: {
      type: Number,
      default: 0,
    },
    activityId: {
      type: Number,      
      default: 0,
    },
  });

  const toActivityDetailInvitationRankingDetail = () => {
    navigateTo({
      name: 'activityDetailInvitationRankingDetail',
      options: {
        activityId: props.activityId,
      },
    });
  };

  const toActivityDetailInvitationRanking = () => {
    navigateTo({
      name: 'activityDetailInvitationRanking',
      options: {
        activityId: props.activityId,
      },
    });
  };
</script>
<style lang="scss" scoped>
  .invutation {
    display: flex;
    gap: 24rpx;
    .invutation-num,
    .invutation-rank {
      flex: 1;
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      background: #fff;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
        .title {
          color: #333;
          font-size: 32rpx;
          font-weight: 700;
          line-height: 48rpx;
        }
        .jump {
          display: flex;
          align-items: center;
          gap: 4rpx;
          .text {
            font-size: 24rpx;
            font-weight: 400;
            line-height: 40rpx;
          }
          .icon-you1 {
            font-size: 24rpx;
            color: #969799;
            line-height: 40rpx;
          }
        }
      }
      .right {
        align-self: center;
        justify-self: center;
      }
    }
    .invutation-num {
      .left {
        .jump {
          .text {
            color: #2878ff;
          }
          .text-num-unit {
            line-height: 32rpx;
          }
        }
      }
    }
    .invutation-rank {
      .left {
        .jump {
          .text {
            color: #999996;
          }
        }
      }
    }
  }
</style>
